<template>
	<div class="madp-inspection-detail">
		<div class="madp-basic">
			<div class="madp-common-title">规则信息</div>
			<el-form label-width="85px">
				<div class="madp-basic-box">
					<div class="madp-basic-box-left">
						<el-form-item label="规则名称:">{{ currentData.name }}</el-form-item>
						<el-form-item label="创建人:">{{ currentData.owner }}</el-form-item>
						<el-form-item label="创建时间:">{{ currentData.createTime }}</el-form-item>
						<el-form-item label="质检群聊:">
							<div class="madp-group">
								<div v-for="(item, index) in currentData.rooms.slice(0, maxNum)" :key="index" class="madp-group-chat">
									<div class="madp-group-chat-icon">
										<i class="icon-fensiguanli"></i>
										<div>群聊</div>
									</div>
									<div class="madp-group-chat-info">
										<div class="madp-group-chat-info-name" :title="item.name">{{ item.name }}</div>
										<div class="madp-group-chat-info-num">
											{{ item.peopleNumber }} /
											{{ item.maxNumber }}
										</div>
									</div>
								</div>
							</div>
							<div class="madp-more madp-ml" v-if="currentData.rooms && currentData.rooms.length > maxNum">
								<el-button type="text" @click="moreVisible = true">
									查看更多
									<i class="el-icon-arrow-right madp-ml"></i>
								</el-button>
							</div>
						</el-form-item>
					</div>
					<div class="madp-basic-box-right">
						<el-form-item label="规则:">
							<div class="madp-rules">
								<el-scrollbar>
									<div class="madp-rules-box">
										<div class="madp-rules-box-item" v-for="(item, index) in currentData.rules" :key="index">
											<div class="madp-rules-box-item-top">
												<div class="madp-rules-box-item-top-title">规则{{ index + 1 }}</div>
												<!-- <div
													class="
														madp-rules-box-item-top-detail
													"
												>
													<el-button type="text">
														查看
													</el-button>
                                                </div>-->
											</div>
											<div class="madp-info">
												<div>
													为超过
													<span class="madp-info-time"> {{ item.time }}{{ item.timeType | transLimitType }} </span>未回复客户消息的群聊
												</div>
												<div class="madp-info-staff">
													<div>给{{ item.roleName }}</div>
													<div v-for="(it, ind) in item.names" :key="ind" class="madp-info-staff-item">
														<i :class="'el-icon-user-solid'" />
														{{ it }}
													</div>
												</div>
												<div>发送金融提醒</div>
											</div>
										</div>
									</div>
								</el-scrollbar>
							</div>
						</el-form-item>
					</div>
				</div>
			</el-form>
		</div>

		<el-dialog title="群聊" :close-on-click-modal="false" :visible.sync="moreVisible" @close="moreVisible = false" width="600px">
			<div class="madp-group">
				<div v-for="(item, index) in currentData.rooms" :key="index" class="madp-group-chat">
					<div class="madp-group-chat-icon">
						<i class="icon-fensiguanli"></i>
						<div>群聊</div>
					</div>
					<div class="madp-group-chat-info">
						<div class="madp-group-chat-info-name" :title="item.name">{{ item.name }}</div>
						<div class="madp-group-chat-info-num">
							{{ item.peopleNumber }} /
							{{ item.maxNumber }}
						</div>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="moreVisible = false">确定</el-button>
			</div>
		</el-dialog>

		<div class="madp-horizontal-divider"></div>

		<div class="madp-statistics">
			<div class="madp-common-title">数据总览</div>
			<div class="madp-statistics-card">
				<div v-for="item in cardInfo" :key="item.key" class="madp-statistics-card-item" :style="{ backgroundColor: item.color || 'transparent' }">
					<span class="madp-statistics-card-item-desc">{{ item.label }}</span>
					<span class="madp-statistics-card-item-number">
						{{ cardData[item.key] || 0 }}
					</span>
				</div>
			</div>
		</div>
		<div class="madp-horizontal-divider"></div>
		<div class="madp-table">
			<div class="madp-table-title">
				<div>
					<span class="madp-common-title">群聊详情数据</span>
					<span class="madp-table-title-divider">|</span>
					<span>共{{ currentData.rooms.length }}个群聊</span>
				</div>
				<!-- <div>
					<download-btn title="导出Excel" @click="downloadExcel" />
                </div>-->
			</div>
			<div class="madp-table-box madp-mt">
				<el-table
					:data="currentData.rooms"
					:header-cell-style="{
						background: 'rgb(255, 191, 191)',
						color: 'rgb(44,44,44)',
					}"
					stripe
				>
					<el-table-column label="群聊名称" prop="name" align="center"></el-table-column>
					<el-table-column label="群主" prop="owner" align="center"></el-table-column>
					<el-table-column label="群状态" prop="status" align="center">
						<template slot-scope="scope">{{ scope.row.status | status }}</template>
					</el-table-column>
					<el-table-column label="群人数" prop="peopleNumber" align="center"></el-table-column>
					<el-table-column label="总触发规则次数" prop="totalTime" align="center"></el-table-column>
					<el-table-column label="今日触发规则次数" prop="todayTime" align="center"></el-table-column>
					<el-table-column label="群聊内员工人数" prop="employeeNumber" align="center"></el-table-column>
					<el-table-column label="近期提醒时间" prop="latestTime" align="center" width="150px"></el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<div>
								<el-button type="text" @click="seeDetails(scope.row)">查看详情</el-button>
							</div>
						</template>
					</el-table-column>
					<div slot="empty" class="madp-table-nodata">
						<div>
							<img src="/img/nodata.png" alt />
						</div>
						<div>暂无数据</div>
					</div>
				</el-table>
			</div>
		</div>
		<el-dialog title="查看详情" :close-on-click-modal="false" :visible.sync="dialogVisible" width="60%">
			<div class="madp-box">
				<div class="madp-right-box">
					<el-tabs type="border-card" v-model="activeTabType" @tab-click="changeTabType">
						<el-tab-pane v-for="item in fileTypeList" :key="item.type" :label="item.name" :name="item.type">
							<el-date-picker
								v-model="value1"
								v-if="chatList.length > 0"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								:picker-options="{
									disabledDate(time) {
										return time.getTime() > Date.now();
									},
								}"
							></el-date-picker>
							<div class="madp-center-empty" v-if="chatList.length == 0">
								<img class="madp-no-link" src="/img/nodata.png" alt />
								<div>暂无数据</div>
							</div>
							<div class="madp-chatInfo" v-for="(it, i) in chatList" :key="i">
								<div>
									<div>
										<p :class="it.isCurrentUser == 0 ? 'madp-chat-link' : 'madp-chat-link madp-chat-right'">
											<span v-if="it.isCurrentUser == 0">
												<span class="madp-chatInfo-name">{{ it.from.name }}</span>
												<!-- <span class="madp-chatInfo-time">{{it.msgDataTime}}</span> -->
											</span>
											<span v-else>
												<!-- <span class="madp-chatInfo-etime">{{it.msgDataTime}}</span> -->
												<span class="madp-chatInfo-ename">{{ it.from.name }}</span>
											</span>
										</p>
										<div v-if="it.msgType == 1" :class="it.isCurrentUser == 0 ? '' : 'madp-chat-right'">
											<p :class="it.isCurrentUser == 0 ? 'madp-chatInfo-chat' : 'madp-chatInfo-echat'">{{ it.content.content }}</p>
										</div>
										<div v-if="it.msgType == 2" :class="it.isCurrentUser == 0 ? 'madp-chat-box' : 'madp-chat-box madp-chatInfo-eimg'">
											<img
												:src="it.content.ossPath"
												class="madp-chatInfo-img"
												@click="
													isLargeImgShow = true;
													largeImgUrl = it.content.ossPath;
												"
											/>
										</div>
										<div v-if="it.msgType == 13" :class="it.isCurrentUser == 0 ? '' : 'madp-chat-right'">
											<p class="madp-chat-color">
												<a :href="it.content.link_url" target="_blank">{{ it.content.link_url }}</a>
											</p>
										</div>
										<div v-if="it.msgType == 4" :class="it.isCurrentUser == 0 ? '' : 'madp-right-audio'">
											<audio :src="it.content.ossPath" controls="controls" class="madp-chatInfo-audio"></audio>
										</div>
										<div :class="it.isCurrentUser == 0 ? '' : 'madp-chatInfo-eimg'" v-if="it.msgType == 5">
											<video :src="it.content.ossPath" controls="controls" class="madp-chatInfo-img"></video>
										</div>
										<div v-if="it.msgType == 7" :class="it.isCurrentUser == 0 ? '' : 'madp-right-audio'">
											<!-- 音频 -->
											<div v-if="it.content.fileext == 'mp3'">
												<audio :src="it.content.ossPath" controls="controls" class="madp-chatInfo-audio"></audio>
											</div>
											<!-- 视频 -->
											<div v-if="it.content.fileext == 'mp4'">
												<video :src="it.content.ossPath" controls="controls" class="madp-chatInfo-img"></video>
											</div>
											<div class="madp-file" v-else>
												<div>
													<p>{{ it.content.filename }}</p>
													<p>{{ (it.content.filesize / 1024).toFixed(2) }}kb</p>
												</div>
												<a :href="it.content.ossPath" target="_blank">
													<img src="/img/xlsx.png" v-show="it.content.fileext == 'xlsx'" class="madp-chatInfo-file" />
													<img src="/img/pdf.jpg" v-show="it.content.fileext == 'pdf'" class="madp-chatInfo-file" />

													<img src="/img/ppt.jpg" v-show="it.content.fileext == 'pptx'" class="madp-chatInfo-file" />

													<img src="/img/txt.png" v-show="it.content.fileext == 'txt'" class="madp-chatInfo-file" />

													<img src="/img/word.png" v-show="it.content.fileext == 'docx'" class="madp-chatInfo-file" />

													<img src="/img/csv.png" v-show="it.content.fileext == 'csv'" class="madp-chatInfo-file" />
													<img :src="it.content.ossPath" class="madp-chatInfo-file" v-show="it.content.fileext == 'png'" />
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="madp-page">
								<el-pagination
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									:current-page="page.currentPage"
									:page-sizes="[10, 20, 30, 50, 100]"
									:page-size="page.pageSize"
									layout="total, sizes, prev, pager, next, jumper"
									:total="page.total"
								></el-pagination>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import StatisticsCard from '@/components/statistics-card/';
import DownloadBtn from '@/components/download-btn/';
import {
	checkInspection, //查看列表
} from '@/api/operation-manage/group-chat-inspection';
export default {
	components: {
		StatisticsCard,
		DownloadBtn,
	},
	props: {
		currentData: Object,
	},
	data() {
		return {
			groupId: '',
			value1: '',
			chatList: [],
			page: {
				currentPage: 1,
				pageSize: 10,
				total: 0,
			},
			activeTabType: '0',
			fileTypeList: [
				{
					name: '全部',
					type: '0',
				},
				{
					name: '文本',
					type: '1',
				},
				{
					name: '图片',
					type: '2',
				},
				{
					name: '链接',
					type: '13',
				},
				{
					name: '语音',
					type: '4',
				},
				{
					name: '视频',
					type: '5',
				},
				{
					name: '文件',
					type: '7',
				},
			],
			dialogVisible: false,
			maxNum: 0,
			moreVisible: false,
			cardInfo: [
				{
					label: '总触发规则次数',
					key: 'allTriggerTimes',
					color: '#FFD700',
				},
				{
					label: '今日触发规则次数',
					key: 'todayTriggerTimes',
					color: '#FF8C00',
				},
				{
					label: '本周触发规则次数',
					key: 'weekTriggerTimes',
					color: '#90EE90',
				},
				{
					label: '本月触发规则次数',
					key: 'monthTriggerTimes',
					color: '#00CED1',
				},
			],
			cardData: {
				allTriggerTimes: this.currentData.totalTime,
				todayTriggerTimes: this.currentData.todayTime,
				weekTriggerTimes: this.currentData.weekTime,
				monthTriggerTimes: this.currentData.monthTime,
			},
		};
	},
	filters: {
		status(val) {
			const list = {
				0: '正常',
				1: '跟进人离职',
				2: '离职继承中',
				3: '离职继承完成',
			};
			return list[val];
		},
		transLimitType(val) {
			switch (val) {
				case 1:
					return '小时';
				case 2:
					return '分钟';
				case 3:
					return '秒钟';
				default:
					break;
			}
		},
	},
	mounted() {
		this.onChangeMaxNum();
		window.onresize = this.onChangeMaxNum;
		// this.getData()
	},
	methods: {
		getData() {
			const data = {
				type: this.activeTabType,
				roomId: this.groupId,
				current: this.page.currentPage,
				size: this.page.pageSize,
			};
			checkInspection(data).then((res) => {
				if (res.data && res.data.code == 0) {
					this.chatList = res.data.data.records;
					this.page.total = res.data.data.total;
				}
			});
		},
		onChangeMaxNum() {
			const groupEl = document.getElementsByClassName('madp-group');
			if (groupEl && groupEl[0]) {
				this.maxNum = Math.floor(groupEl[0].offsetWidth / 140) * 2;
			}
		},
		downloadExcel() {},
		changeTabType() {
			this.getData({ type: this.activeTabType });
		},
		seeDetails(row) {
			this.dialogVisible = true;
			this.groupId = row.id;
			this.getData();
		},
		handleSizeChange(val) {
			this.page.pageSize = val;
			this.getData();
		},
		handleCurrentChange(val) {
			this.page.currentPage = val;
			this.getData();
		},
	},
};
</script>

<style lang="scss" scoped>
a {
	text-decoration: none;
	color: #fff;
}
.madp-inspection-detail {
	.madp-basic {
		&-box {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			&-left,
			&-right {
				width: 50%;
			}
		}
	}
	.madp-common-title {
		font-size: 16px;
		font-weight: bold;
	}
	.madp-horizontal-divider {
		width: 100%;
		height: 4px;
		margin: 20px 0;
		background-color: #f0f2f5;
	}
	/deep/ .el-form-item {
		margin-bottom: 0;
		.el-form-item__label {
			color: #999;
		}
	}
}
.madp-statistics-card {
	margin-top: 20px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-right: 20px;
	&-item {
		width: 20%;
		height: 118px;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&-desc {
			font-size: 22px;
		}
		&-number {
			font-size: 24px;
			font-weight: bold;
		}
	}
}
.madp-group {
	display: flex;
	flex-wrap: wrap;
	line-height: 20px;
	&-chat {
		display: flex;
		margin: 5px 5px;
		width: 130px;
		overflow: hidden;
		border: 1px solid #999;
		padding: 5px;
		border-radius: 3px;
		&-icon {
			width: 40px;
			height: 40px;
			margin-right: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #1990ff;
			color: #fff;
			font-size: 12px;
		}
		&-info {
			&-name {
				width: 70px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			&-num {
				color: #999;
			}
		}
	}
}
.madp-rules {
	background-color: #fbfbfb;
	border: 1px solid #eee;
	&-box {
		padding: 16px;
		padding-top: 0;
		max-height: 260px;
		&-item {
			padding-top: 16px;
			&-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 18px;
				line-height: 18px;
				&-title {
					font-weight: bold;
					padding-left: 7px;
					border-left: 3px solid #666;
				}
			}
			.madp-info {
				line-height: 24px;
				margin-left: 10px;
				&-time {
					font-weight: bold;
				}
				&-staff {
					display: flex;
					&-item {
						padding: 0 10px;
						margin-left: 10px;
						border: 1px solid #999;
						border-radius: 5px;
					}
				}
			}
		}
	}
}
.madp-table {
	&-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-divider {
			margin: 0 10px;
		}
	}
	&-pagination {
		display: flex;
		justify-content: flex-end;
	}
}
.madp-table-nodata {
	padding: 20px;
	line-height: 32px;
}
.madp-ml {
	margin-left: 10px;
}
.madp-mt {
	margin-top: 20px;
}
.madp-box {
	width: 100%;
	display: flex;
	.madp-right-box {
		flex: 1;
	}
}

.madp-chatInfo {
	margin: 25px auto 68px;
	.madp-chatInfo-name {
		color: #696969;
		font-size: 12px;
	}
	.madp-chatInfo-ename {
		color: #696969;
		font-size: 12px;
		padding-left: 20px;
	}
	.madp-chatInfo-etime {
		color: #80a7e6;
		font-size: 12px;
	}
	.madp-chatInfo-time {
		color: #80a7e6;
		font-size: 12px;
		padding-left: 20px;
	}

	.madp-chatInfo-chat {
		display: inline;
		padding: 8px 10px;
		height: 34px;
		border-radius: 8px;
		background: #2a57a0;
		color: #fff;
		font-size: 15px;
		margin-top: 10px;
	}
	.madp-chatInfo-img {
		display: block;
		width: 125px;
		height: 125px !important;
		padding: 8px;
		height: 34px;
		border-radius: 8px;
		background: #2a57a0;
		color: #fff;
		font-size: 15px;
		margin-top: 10px;
	}
}
/deep/.el-date-editor .el-range-separator {
	width: 7%;
}
.madp-right-empty {
	display: flex;
	justify-content: center;
	align-items: center;
}
.madp-chatInfo-echat {
	float: right;
	padding: 8px 10px;
	height: 34px;
	border-radius: 8px;
	background: #2a57a0;
	color: #fff;
	font-size: 15px;
}
.madp-chatInfo-audio {
	padding: 8px;
	height: 34px;
	border-radius: 8px;
	background: #2a57a0;
	color: #fff;
	font-size: 15px;
	margin-top: 10px;
}
.madp-chatInfo-image {
	float: right;
}
.madp-chat-link {
	margin: 10px 0;
}
.madp-chat-right {
	display: flex;
	justify-content: flex-end;
}
.madp-no-link {
	text-align: center;
	width: 80px;
	height: 80px;
	margin-top: 20px;
}
.madp-center-empty {
	text-align: center;
}
.madp-chat-box {
	height: 160px;
}
.madp-chatInfo-eimg {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	height: 125px !important;
	padding: 8px;
	border-radius: 8px;
	color: #fff;
	font-size: 15px;
	margin-top: 10px;
}
.madp-chat-color {
	background: #2a57a0;
	padding: 8px 10px;
	height: 34px;
	border-radius: 8px;
	color: #fff;
	font-size: 15px;
}
.madp-right-audio {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
.madp-file {
	height: 104px;
	width: 250px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 8px;
}
.madp-chatInfo-file {
	width: 84px;
	object-fit: contain;
}
.madp-page {
	margin: 20px;
}
</style>
